<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <div  id="app">
        <li>wanqing； 价格： {{wanqingPrice}} , 数量： <input type="number" v-model="wanqingNum"></li>
        <li>西瓜； 价格：{{xiguaPrice}} , 数量： <input type="number" v-model="xiguaNum"></li>
        <li>总价： {{totalPrice}}</li>
    </div>

    <script src="./node_modules/vue/dist/vue.js"></script>
    
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                wanqingPrice: 100000000,
                xiguaPrice: 1,
                wanqingNum: 1,
                xiguaNum: 20
            },
            computed: { // 计算属性，会动态监听
                totalPrice(){
                    return this.wanqingPrice*this.wanqingNum + this.xiguaNum * this.xiguaPrice
                }
            }, 
            watch: { // 监听器属性
                wanqingNum: function(newVal, oldVal){
                    //alert(oldVal +" ==>" + newVal)
                    if(newVal != 1){
                        alert("想什么呢，婉晴只能有一个哦，不是0个也不是2个是一个")
                        this.wanqingNum = 1;
                    } 
                }
    
            },
            methods: {
                cancle(){
                    this.num--;
                }
            }
        });

    </script>

</body>
</html>